<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>MP TOTP</title>
  <link rel="stylesheet" href="popup.css">
  <style>
    body {
      font-family: Arial, sans-serif;
      width: 300px;
      margin: 0;
      padding: 10px;
      background-color: #f5f5f5;
    }
    
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    
    .title {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
    
    .settings-button {
      background: none;
      border: none;
      color: #1976d2;
      cursor: pointer;
      font-size: 12px;
    }
    
    #loading {
      text-align: center;
      margin: 20px 0;
    }
    
    #error {
      color: #f44336;
      background-color: #ffebee;
      padding: 10px;
      border-radius: 4px;
      margin-bottom: 10px;
      display: none;
    }
    
    #setup-button {
      display: none;
      background-color: #1976d2;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
      margin-top: 10px;
    }
    
    #codes-container {
      max-height: 400px;
      overflow-y: auto;
    }
    
    .code-card {
      background-color: white;
      border-radius: 4px;
      padding: 10px;
      margin-bottom: 10px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    .site-name {
      font-weight: bold;
      margin-bottom: 5px;
      color: #333;
    }
    
    .code {
      font-size: 20px;
      font-family: monospace;
      letter-spacing: 2px;
      margin: 5px 0;
      color: #1976d2;
    }
    
    .progress-container {
      position: relative;
      height: 20px;
      margin-top: 5px;
    }
    
    .progress-bar {
      height: 4px;
      background-color: #4caf50;
      width: 100%;
      position: absolute;
      bottom: 0;
      border-radius: 2px;
    }
    
    .time-text {
      position: absolute;
      right: 0;
      font-size: 12px;
      color: #666;
    }
    
    .copy-button {
      background-color: #e0e0e0;
      border: none;
      padding: 5px 10px;
      border-radius: 4px;
      margin-top: 5px;
      cursor: pointer;
      font-size: 12px;
      transition: background-color 0.2s;
    }
    
    .copy-button:hover {
      background-color: #bdbdbd;
    }
  </style>
</head>
<body>
  <div class="header">
    <h1>TOTP验证码</h1>
    <div class="header-actions">
      <button id="settings-button" class="settings-button">设置</button>
    </div>
  </div>
  
  <!-- 错误信息显示区域 -->
  <div id="error" class="message error" style="display: none;"></div>
  
  <!-- 验证码列表容器 -->
  <div id="codes-container" class="codes-container"></div>
  
  <!-- 加载状态指示器 -->
  <div id="loading" class="loading" style="display: none;">
    <div class="spinner"></div>
    <p>正在加载验证码...</p>
  </div>
  
  <!-- 设置按钮 -->
  <button id="setup-button" class="secondary" style="display: none;">配置服务器</button>
  
  <!-- 复制提示通知 -->
  <div id="notification" class="notification"></div>
  
  <!-- 在现有内容的底部添加作者信息 -->
  <div class="footer" style="text-align: center; font-size: 10px; color: #666; margin-top: 10px; padding-top: 5px; border-top: 1px solid #eee;">
    <p>MP TOTP助手 © <a href="https://github.com/madrays" target="_blank" style="color: #1976d2; text-decoration: none;">madrays</a> | <a href="https://cocohe.cn" target="_blank" style="color: #1976d2; text-decoration: none;">cocohe.cn</a></p>
  </div>
  
  <script src="popup.js"></script>
</body>
</html>
